*{
  padding: 0;
  margin: 0;
  list-style: none;
  text-decoration: none;
  color: #000;
}

html{
  font-size: 18px;
}
.wrap{
  width: 310px;
  height: 350px;
  margin: 10px auto;
  background-color: #fff;
  border-top: 1px solid #ddd;
}

.wrap> span.title{
  margin: -1px 0 0 0 ;
  /* 行级块元素 宽度自动撑开 就可以实现 文字上部的高亮 */
  display: inline-block;
  height: 30px;
  padding: 10px 5px 0 0;
  border-top: red 1px solid;
  overflow: hidden;
}

.wrap .title a{
  font-size: .9rem;
  color: black;
  font-weight: 800;
  display: inline;
  padding: 5px 0 0 5px;
}

.wrap .title a:hover,.wrap .title a:active{
  color: blue;
  text-decoration:underline;
}
.wrap .pic{
  position: relative;
  width: 310px;
  height: 155px;
  overflow: hidden;
}
.wrap .pic img{
  width: 100%;
  transition:all 1s;
}
.wrap .pic img:hover{
  transform: scale(1.1);
}
.wrap .pic .title{
  color: #fff;  
  font-size: .9rem;
  display: inline-block;
  font-weight: 800;
  height: 20px;
  position: relative;
  top: -5px;
}

.wrap .pic .title:hover{
  color: #f40;
  text-shadow: #fff 1px 1px 3px;
}

.wrap .pic .double-dot::before{
  content: '';
  position: relative;
  top: 5px;
  padding-right: 10px;
  display: inline-block;
  width: 30px;
  height: 30px;
  overflow: hidden;
  background-image: url(http://static.ws.126.net/f2e/news/index2016/images/sprite_icon0813_v1.png);
  background-repeat: no-repeat;
  background-position: 12px -125px;
}
.wrap .desc {
  background-image: linear-gradient(transparent, black);
  background-size: auto 100%;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 40px;
}
.wrap .news-list{
  font-size: .8rem;
  color: #666;
}
.wrap .news-list li a{
  font-size: .8rem;
  color: #666;
}
.wrap .news-list li{
  margin-top: 10px;
}
.wrap .news-list li a:hover{
  color: #f40;
}
.wrap .news-list li a:active{
  color: #f40;
}
.wrap .news-list li::before{
  content: '';
  display: inline-block;
  width: 4px;
  height: 4px;
  background-color: #666;
  margin-bottom: 4px;
  margin-right: 6px;
}
